<template>
    <div class="container">
        <div
        v-for="foods in item.foodsItem "
        :key="foods._id"
        :class="[{active : !foods.available },'food-container']"
        >
        <div class="food-name" @click="order(foods)">

          <div  :class="['number',{'show-number' :showCardList[foods._id] }]">
          {{  showCardList[foods._id] ? showCardList[foods._id].length : ''}}
          </div>

          {{ language==='zh-CN' ? foods.name['zh-CN']: foods.name['en-US'] }}
        </div>
        <div>${{ foods.cost/100 || '0.00' }}</div>
      </div>
    </div>
</template>

<script>

import { mapActions, mapState } from 'vuex';
import _ from 'lodash';

import { set } from '@/common/utils';

export default {

  props: ['item'],
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      language: (state) => state.language.language,
      orderListState: (state) => state.menu.orderListState,
      showCardList: (state) => state.menu.showCardList,
      number: (state) => state.menu.number,
    }),
    number1() {
      const number = {};
      _(this.showCardList).forEach((v) => {
        const id = _.get(v, '_id');
        number[id] = v.num;
      });
      return number;
    },

  },
  created() {
    this.setShowCardList();
  },
  methods: {
    ...mapActions([
      'getMenuList',
      'getOrderListState',
      'saveShowCard',
    ]),

    order(foods) {
      if (foods.available) {
        //*  向vuex中添加点餐列表
        this.orderListState.push(foods);
        //*  往local storage中添加 vuex中的点餐列表
        set(this.$route.params.id, this.orderListState);

        this.setShowCardList();
      }
    },
    setShowCardList() {
      this.getOrderListState({ id: this.$route.params.id });
      const newList = _.groupBy(this.orderListState, '_id');

      this.saveShowCard({ list: newList });
    },
  },
};
</script>

<style lang="scss" scoped>
.active{
  color : #cccccc;
}
// .container{

//   width : 308px;
// }
.food-container{
  display : flex;
  align-items : center;
  justify-content : space-between;
  margin : 10px 0;
  cursor :pointer;
}
.food-name{

  display : flex;
  align-items : center;

}
.number{
  display : flex;
  align-items : center;
  justify-content : center;
  width : 30px;
  height : 30px;
  margin-left : -30px;
  border-radius : 50%;

}
.show-number{

  background-color : #cccccc;
}
</style>
